<template>
  <div class="home psr">
    <XMap class="xmap wp100 hp100 psr" />
    <div class="top"><Top /></div>
    <div class="left">
      <div style="flex: 3; margin-top: 20px;">
        <CardPanel title="接入情况"> <Access /> </CardPanel>
      </div>
      <div style="flex: 4">
        <CardPanel title="告警趋势图">
          <el-select slot="leftExtra" :popper-append-to-body="false" size="small" style="width: 3.65rem" :value="'周'" />
          <WarnTrend />
        </CardPanel>
      </div>
      <div style="flex: 6">
        <CardPanel title="工单处理">
          <el-select slot="leftExtra" size="small" style="width: 3.65rem" :value="'周'" :popper-append-to-body="false"> </el-select>
          <WorkOrder />
        </CardPanel>
      </div>
    </div>
    <div class="top-info">
      <div>
        <img src="@/assets/image/icon/fire_warning.png" />
        <p class="fireWarning">
          370
          <span>火警</span>
        </p>
      </div>
      <div>
        <img src="@/assets/image/icon/error.png" />
        <p class="error">
          370
          <span>故障</span>
        </p>
      </div>
      <div>
        <img src="@/assets/image/icon/monitor.png" />
        <p class="monitor">
          370
          <span>监管</span>
        </p>
      </div>
      <div>
        <img src="@/assets/image/icon/feedback.png" />
        <p class="feedback">
          370
          <span>反馈</span>
        </p>
      </div>
      <div>
        <img src="@/assets/image/icon/cover.png" />
        <p class="cover">
          12
          <span>屏蔽</span>
        </p>
      </div>
      <div>
        <img src="@/assets/image/icon/other.png" />
        <p class="other">
          37
          <span>其他</span>
        </p>
      </div>
    </div>
    <div class="detail">
      <CardPanel large title="告警详情">
        <WarningDetail />
      </CardPanel>
    </div>
    <div class="right">
      <div style="flex: 5; margin-top: 20px">
        <CardPanel title="红黑榜">
          <div slot="leftExtra">
            <el-radio-group v-model="radio1" size="mini">
              <el-radio-button label="1">红榜</el-radio-button>
              <el-radio-button label="2">黑榜</el-radio-button>
            </el-radio-group>
          </div>
          <Rank v-if="radio1 == '1'" />
          <BlackRank v-else />
        </CardPanel>
      </div>
      <div style="flex: 5">
        <CardPanel title="维保巡检">
          <template #default> <Patrol /> </template>
        </CardPanel>
      </div>
      <div style="flex: 4">
        <CardPanel title="实时监控">
          <el-select slot="leftExtra" :popper-append-to-body="false" class="changeVideo" size="small" :value="'视频1'" />
        </CardPanel>
      </div>
    </div>
  </div>
</template>
<script>
import XMap from '@/components/map';
import Top from './components/top.vue';
import CardPanel from '@/components/cardPanel/index.vue';
import Access from './components/access.vue';
import WarnTrend from './components/warning.vue';
import WorkOrder from './components/workOrder.vue';
import WarningDetail from './components/waringDetail.vue';
import Patrol from './components/patrol.vue';
import Rank from './components/rank.vue';
import BlackRank from './components/blackRank.vue';
export default {
  components: { XMap, CardPanel, Access, WarnTrend, WorkOrder, WarningDetail, BlackRank, Patrol, Rank, Top },
  data() {
    return {
      radio1: '1'
    };
  },
  mounted() {
    window.addEventListener('resize', this.handlResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handlResize);
  },
  methods: {
    handlResize() {
      window.location.reload();
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  background-size: 100% 100%;
  height: 100%;
  background-color: #10141e;
  width: 100%;
  position: relative;
  :deep(.el-radio-button--mini .el-radio-button__inner) {
    background: #011f3b;
    border: 1px solid #1a85d8;
    font-size: px(14);
    padding: px(7) px(9);
  }
  :deep(.el-radio-button__inner) {
    color: #fff;
  }
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    color: #64deff;
    border: 1px solid #1a85d8;
  }
  :deep(.el-radio-button:last-child .el-radio-button__inner) {
    background: #011f3b;
  }
  :deep(.el-input__suffix) {
    margin-right: px(5);
  }
  :deep(.el-input__inner) {
    background: rgba(1, 31, 59, 1);
    font-size: px(12);
    height: px(32);
    padding: 0 px(12);
    line-height: px(32);
    border: 1px solid rgba(26, 133, 216, 1);
    color: #fff;
    box-shadow: none;
    > .el-icon-arrow-up:before {
      line-height: px(32);
    }
  }
  :deep(.el-select .el-input .el-select__caret) {
    font-size: px(14);
  }
  :deep(.el-input--small .el-input__icon) {
    line-height: px(32);
  }
  :deep(.el-select .el-input .el-select__caret) {
    color: #6eadf5;
  }
  :deep(.el-select-dropdown__empty) {
    font-size: px(14);
    padding: px(10) 0;
  }
  :deep(.el-select-dropdown__item) {
    font-size: px(14);
    color: #fff;
    &.hover {
      background: rgba(236, 239, 241, 0.5);
    }
    &:hover {
      background: rgba(236, 239, 241, 0.5);
    }
  }
  .top {
    background: url('~@/assets/image/top_bar.png') no-repeat center;
    background-color: rgba(13, 37, 64, 0.9);
    height: px(142);
    width: 100%;
    position: absolute;
    background-size: 103% 100%;
    background-position-x: -px(40);
    left: 0;
    top: 0;
  }
  .left {
    background: url('~@/assets/image/bg_warp.png') no-repeat left;
    background-position-y: px(10);
    background-size: px(1500) 100%;
    background-color: rgba(13, 37, 64, 0.9);
    > div {
      flex: 1;
      &:first-child {
        min-height: px(190);
      }
      &:not(:first-child) {
        margin-top: px(20);
      }
    }
    left: 0;
    top: px(55);
    position: absolute;
    width: px(500);
    padding-top: px(35);
    height: calc(100vh - px(95));
    display: flex;
    flex-direction: column;
    padding-left: px(20);
  }
  .top-info {
    width: calc(100vw - px(1060));
    left: px(530);
    top: px(120);
    position: absolute;
    height: px(70);
    background: url('~@/assets/image/top_info_bar.png') no-repeat center;
    background-size: 100% 100%;
    background-color: rgba(13, 37, 64, 0.9);
    display: flex;
    padding: 0 px(55);
    box-sizing: border-box;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      > img {
        width: px(51);
        height: px(29);
        object-fit: cover;
      }
      > p {
        display: flex;
        flex-direction: column;
        font-weight: normal;
        font-size: px(24);
        align-items: flex-start;
        font-weight: bold;
        > span {
          font-size: px(14);
          color: #fff;
        }
      }
    }
  }
  .detail {
    width: calc(100vw - px(1060));
    background-color: rgba(13, 37, 64, 0.9);
    left: px(530);
    bottom: px(6);
    position: absolute;
    height: px(275);
  }
  .right {
    background: url('~@/assets/image/bg_warp.png') no-repeat right;
    background-position-y: px(10);
    background-size: px(1500) 100%;
    background-color: rgba(13, 37, 64, 0.9);
    right: 0;
    top: px(55);
    position: absolute;
    width: px(520);
    padding-top: px(35);
    height: calc(100vh - px(60));
    display: flex;
    flex-direction: column;
    padding-right: px(20);
    box-sizing: border-box;
    .changeVideo {
      width: px(100);
    }
    > div {
      flex: 1;
      &:not(:first-child) {
        margin-top: px(20);
      }
    }
  }
}
</style>
